<template>
  <div class="el-custom-from">
    <el-tabs v-loading="formLoading">
      <el-tab-pane>
        <template #label>
          <div>
            <span class="font_16px font_Title">
              <i class="el-icon-edit"></i>
              {{ this.$t("flowi18n.flow_property") }}
            </span>
          </div>
        </template>
        <div id="From_div_style" >
          <el-container>
            <el-main id="el-custom-form-main" style="  margin-right:10px">
              <div class="container form-container" >
                <el-scrollbar>
                  <el-form
                    ref="propertyData"
                    :model="flowproperty"
                    label-width="100px"
                    class="demo-ruleForm"
                    size="mini"
                    :rules="rules"
                  >
                    <el-col style="width:30%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_property_name')"
                        prop="cnName"
                        class="el-from-custom-item"
                      >
                        <el-input v-model="flowproperty.cnName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:30%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_property_flowenname')"
                        prop="enName"
                        class="el-from-custom-item"
                      >
                        <el-input v-model="flowproperty.enName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:30%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_property_flowtype')"
                        prop="type"
                        class="el-from-custom-item"
                      >
                        <el-select
                          v-model="flowproperty.type"
                          disabled="disabled"
                        >
                          <el-option
                            v-for="(child, index) in conf.flows"
                            :key="index"
                            :label="$t('i18n.' + child.label)"
                            :value="child.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>

                    <el-col style="width:100%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_property_from')"
                        prop="form"
                      >
                        <table-componets-vue
                          :isShowButton="true"
                          @tableEvent="formEvent"
                          :tables="{
                            body: flowproperty.form,
                            header: formheaders,
                            operations: options,
                          }"
                          :Select="'MultiSelect'"
                          :ref="'form_multipleTable'"
                          :isOpertions="1 == 1"
                          :fieldkey="{
                            fieldKey: 'form',
                          }"
                          :maxheight="240"
                        ></table-componets-vue>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:30%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_property_viewfrom')"
                        class="el-from-custom-item"
                      >
                        <el-radio-group
                          v-model="flowproperty.view_Instance"
                          size="mini"
                        >
                          <el-radio-button :label="false">{{
                            $t("flowi18n.flow_property_no")
                          }}</el-radio-button>
                          <el-radio-button :label="true">{{
                            $t("flowi18n.flow_property_yes")
                          }}</el-radio-button>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:30%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_property_updateApply')"
                        class="el-from-custom-item"
                      >
                        <el-radio-group
                          v-model="flowproperty.selectApplyEmp"
                          size="mini"
                        >
                          <el-radio-button :label="false">{{
                            $t("flowi18n.flow_property_no")
                          }}</el-radio-button>
                          <el-radio-button :label="true">{{
                            $t("flowi18n.flow_property_yes")
                          }}</el-radio-button>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:30%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_property_skiprule')"
                        class="el-from-custom-item"
                      >
                        <el-select
                          v-model="flowproperty.skipRules"
                          :disabled="flowproperty.parallelTask"
                        >
                          <el-option
                            :label="$t('flowi18n.flow_property_skiprule0')"
                            :value="0"
                          ></el-option>
                          <el-option
                            :label="$t('flowi18n.flow_property_skiprule1')"
                            :value="1"
                          ></el-option>
                          <el-option
                            :label="$t('flowi18n.flow_property_skiprule2')"
                            :value="2"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:30%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_property_undo')"
                        class="el-from-custom-item"
                      >
                        <el-radio-group
                          v-model="flowproperty.recycled"
                          size="mini"
                        >
                          <el-radio-button :label="false">{{
                            $t("flowi18n.flow_property_no")
                          }}</el-radio-button>
                          <el-radio-button :label="true">{{
                            $t("flowi18n.flow_property_yes")
                          }}</el-radio-button>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:30%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_property_background')"
                      >
                        <el-color-picker
                          v-model="flowproperty.flowStyle"
                          show-alpha
                          :predefine="predefineColors"
                        ></el-color-picker>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:30%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_property_svg_icon')"
                      >
                        <el-button
                          type="primary"
                          :style="{
                            background: flowproperty.flowStyle,
                            'border-color': flowproperty.flowStyle,
                          }"
                          @click="SelectFlowIcon"
                        >
                          <svg class="icon" aria-hidden="true">
                            <use :xlink:href="flowproperty.flowIcon" />
                          </svg>
                        </el-button>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:100%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_property_manguager')"
                        prop="managers"
                      >
                        <table-componets-vue
                          :isShowButton="true"
                          @tableEvent="tableEvent"
                          :tables="{
                            body: flowproperty.managers,
                            header: headers,
                            operations: options,
                          }"
                          :Select="'MultiSelect'"
                          :ref="'managers_multipleTable'"
                          :isOpertions="1 == 1"
                          :maxheight="240"
                          :fieldkey="{
                            fieldKey: 'managers',
                          }"
                        ></table-componets-vue>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:100%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_property_instance_manguager')"
                        prop="instanceManagers"
                      >
                        <table-componets-vue
                          :isShowButton="true"
                          @tableEvent="tableEvent"
                          :tables="{
                            body: flowproperty.instanceManagers,
                            header: headers,
                            operations: options,
                          }"
                          :Select="'MultiSelect'"
                          :ref="'instanceManagers_multipleTable'"
                          :isOpertions="1 == 1"
                          :maxheight="240"
                          :fieldkey="{
                            fieldKey: 'instanceManagers',
                          }"
                        ></table-componets-vue>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:100%">
                      <el-form-item size="small">
                        <el-checkbox
                          v-model="flowproperty.sendMessage"
                          :label="$t('flowi18n.flow_property_sendmMssage')"
                          border
                        ></el-checkbox>
                        <el-checkbox
                          v-if="false"
                          @change="changeParallelTaske(flowproperty)"
                          v-model="flowproperty.parallelTask"
                          :label="$t('flowi18n.flow_property_paralleltask')"
                          border
                        ></el-checkbox>
                        <el-checkbox
                          v-model="flowproperty.sumbitPrevStep"
                          :label="$t('flowi18n.flow_property_sumbitprevtask')"
                          border
                        ></el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:100%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_property_placeholder')"
                      >
                        <el-input
                          rows="4"
                          v-model="flowproperty.placeholder"
                          maxlength="200"
                          show-word-limit
                          type="textarea"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col style="width:100%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_property_desc')"
                      >
                        <el-input
                          rows="8"
                          v-model="flowproperty.note"
                          maxlength="200"
                          show-word-limit
                          type="textarea"
                        />
                      </el-form-item>
                    </el-col>
                  </el-form>
                </el-scrollbar>
              </div>
            </el-main>
            <el-footer>
              <div class="form_handle-box">
                <el-button
                  plain
                  type="primary"
                  @click="SaveEvent()"
                  size="mini"
                  >{{ $t("table.Global_Save") }}</el-button
                >

                <el-button
                  plain
                  type="danger"
                  @click="BackEvent()"
                  size="mini"
                  >{{ $t("table.Global_Back") }}</el-button
                >
              </div>
            </el-footer>
          </el-container>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="el-dialog-content">
      <dialog-flow-icon-componet-vue
        ref="dialogFlowIcon"
        @confirmEvent="confirmEvent"
      ></dialog-flow-icon-componet-vue>
      <dialog-employee-componet-vue
        ref="emp"
        @confirmEvent="dialogConfirmEvent"
      ></dialog-employee-componet-vue>
      <dialog-form-componet-vue
        ref="dialogFormInfo"
        @confirmEvent="dialogConfirmEvent"
      ></dialog-form-componet-vue>
    </div>
  </div>
</template>

<script>
import TableComponetsVue from "./TableComponets.vue";
import DialogFlowIconComponetVue from "./DialogFlowIconComponet.vue";
import DialogEmployeeComponetVue from "./DialogEmployeeComponet.vue";

import flowConfig from "../assets/config/model.json";
import DialogFormComponetVue from "./form/DialogFormComponet.vue";

let windowHeight = parseInt(window.innerHeight);
export default {
  name: "flow-property",
  data() {
    return {
      formLoading: false,
      autoHeight: {
        height: "",
        width: "96%",
        margin: "11px",
        float: "left",
      },
      contentHeight: {
        height: "",
      },
      flowproperty: {
        type: 0,
        from: [],
        flowStyle: "#409EFF",
        flowIcon: "#icon-shezhi",
        skipRules: 0,
        managers: [],
        instanceManagers: [],
      },
      options: [
        {
          icon: "el-icon-plus",
          keyFieldValue: "",
          label: this.$t("i18n.co_add"),
          primaryKeyValue: 0,
          shape: "",
          size: "mini",
          type: "",
          value: "add",
        },
        {
          icon: "el-icon-delete",
          keyFieldValue: "",
          label: this.$t("i18n.co_del"),
          primaryKeyValue: 0,
          shape: "",
          size: "mini",
          type: "danger",
          value: "delete",
        },
      ],
      headers: [
        {
          key: "empId",
          name: this.$t("flowi18n.flow_property_empid"),
          width: 0,
          hide: true,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: false,
          editor: false,
          controlType: 0,
          fixed: false,
        },
        {
          key: "cnName",
          name: this.$t("flowi18n.flow_property_cnname"),
          width: 0,
          hide: false,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: true,
          editor: false,
          controlType: 0,
          fixed: false,
        },
        {
          key: "enName",
          name: this.$t("flowi18n.flow_property_enname"),
          width: 0,
          hide: false,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: true,
          editor: false,
          controlType: 0,
          fixed: false,
        },
      ],
      formheaders: [
        {
          key: "formid",
          name: "",
          width: 0,
          hide: true,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: false,
          editor: false,
          controlType: 0,
          fixed: false,
        },
        {
          key: "cnName",
          name: this.$t("flowi18n.flow_property_cnname"),
          width: 0,
          hide: false,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: true,
          editor: false,
          controlType: 0,
          fixed: false,
        },
        {
          key: "enName",
          name: this.$t("flowi18n.flow_property_enname"),
          width: 0,
          hide: false,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: true,
          editor: false,
          controlType: 0,
          fixed: false,
        },
        {
          key: "currentVersion",
          name: this.$t("flowi18n.flow_form_currentVersion"),
          width: 0,
          hide: false,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: true,
          editor: false,
          controlType: 0,
          fixed: false,
        },
        {
          key: "currentVersionId",
          name: "",
          width: 0,
          hide: true,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: true,
          editor: false,
          controlType: 0,
          fixed: false,
        },
      ],
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ], ///数据验证规则
      rules: {
        cnName: [
          {
            min: 1,
            max: 50,
            message: this.$t("errori18n.err_flow_CNName_length"),
            trigger: "blur",
          },
          {
            required: true,
            message: this.$t("errori18n.err_flow_CNName"),
            trigger: "blur",
          },
        ],
        enName: [
          {
            min: 1,
            max: 50,
            message: this.$t("errori18n.err_flow_ENName_length"),
            trigger: "blur",
          },
          {
            required: true,
            message: this.$t("errori18n.err_flow_ENName"),
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: this.$t("errori18n.err_flow_flowType"),
            trigger: "change",
          },
        ],
        form: [
          {
            required: true,
            message: this.$t("errori18n.err_flow_formId"),
            trigger: "change",
          },
        ],
        instanceManagers: [
          {
            required: true,
            message: this.$t("errori18n.err_flow_instanceManagers"),
            trigger: "change",
          },
        ],
        managers: [
          {
            required: true,
            message: this.$t("errori18n.err_flow_managers"),
            trigger: "change",
          },
        ],
      },
      conf: flowConfig.conf,
    };
  },

  methods: {
    ///设置窗台的高度
    getHeight() {
      this.autoHeight.height = windowHeight - 60 + "px";
      this.contentHeight.height = windowHeight - 200 + "px";
    },
    SelectFlowIcon() {
      this.$refs.dialogFlowIcon.dialogFlowIocnVisible = true;
      this.$refs.dialogFlowIcon.icon = this.flowproperty.flowIcon;
      this.$refs.dialogFlowIcon.background = this.flowproperty.flowStyle;
    },
    confirmEvent(icon) {
      this.flowproperty.flowIcon = icon;
    },
    ///实例管理操作
    tableEvent(item) {
      this.dialogAddEvent(item);
      this.dialogDeleteEvent(item);
    },
    dialogAddEvent(item) {
      if (item.data.value === "add") {
        this.$refs.emp.paramters = {
          fieldKey: item.key,
          data: this.flowproperty[item.key.fieldKey],
          exceptDataField: [],
        };
        this.$refs.emp.dialogEmpVisible = true;
        this.$refs.emp.InitData();
      }
    },
    dialogDeleteEvent(item) {
      let data = this.flowproperty;
      if (item.data.value === "delete") {
        let tables = this.$refs[item.key.fieldKey + "_multipleTable"]
          .tableResult;
        tables.forEach((element) => {
          var index = data[item.key.fieldKey].indexOf(element);
          if (index !== -1) {
            data[item.key.fieldKey].splice(index, 1);
          }
        });
      }
    },
    ///表单设置
    formEvent(item) {
      this.dialogFormAddEvent(item);
      this.dialogFormDeleteEvent(item);
    },
    dialogFormAddEvent(item) {
      if (item.data.value === "add") {
        this.$refs.dialogFormInfo.paramters = {
          fieldKey: item.key,
          data: this.flowproperty[item.key.fieldKey],
          exceptDataField: [],
        };
        this.$refs.dialogFormInfo.dialogFormInfoVisible = true;
        this.$refs.dialogFormInfo.InitTable();
      }
    },
    dialogFormDeleteEvent(item) {
      let data = this.flowproperty;
      if (item.data.value === "delete") {
        let tables = this.$refs[item.key.fieldKey + "_multipleTable"]
          .tableResult;
        tables.forEach((element) => {
          var index = data[item.key.fieldKey].indexOf(element);
          if (index !== -1) {
            data[item.key.fieldKey].splice(index, 1);
          }
        });
      }
    },
    ///弹出框返回赋值
    dialogConfirmEvent(res) {
      this.flowproperty[res.key.fieldKey] = res.result;
    },
    SaveEvent() {
      this.$refs["propertyData"].validate((valid) => {
        if (valid) {
          this.$emit("FlowPropetryEvent", this.flowproperty);
        } else {
          return false;
        }
      });
    },
    BackEvent() {
      if (
        this.flowproperty.flowId == "" ||
        this.flowproperty.flowId == null ||
        this.flowproperty.flowId == undefined
      ) {
        this.$refs.propertyData.resetFields();
        this.flowproperty.manager = [];
        this.flowproperty.instanceManager = [];
        this.$emit("FlowPropetryEvent");
      } else {
        this.$emit("FlowPropetryEvent");
      }
    },
    changeParallelTaske(item) {
      item.skipRules = 0;
    },
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  components: {
    TableComponetsVue,
    DialogFlowIconComponetVue,
    DialogEmployeeComponetVue,
    DialogFormComponetVue,
  },
};
</script>
